<template>
    <div>
        <h1 style="text-align: center;">角色添加</h1>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="角色名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="权限分配">
                <el-tree
                    ref="auths"
                    :data="form.auths"
                    show-checkbox
                    :props="defaultProps"
                    accordion
                >
            </el-tree>
            </el-form-item>
            <el-form-item>
                <el-button
                type="primary"
                @click="handleAdd()">添加</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {authList, roleAdd} from '@/request'
export default {
    data () {
        return {
            form: {
                name: '',
                auths: []
            },
            defaultProps: {
                children: 'children',
                label: 'name'
            }
        }
    },
    methods: {
        getAuthList() {
            authList().then(data => {
                this.form.auths = data.data.authlist
            })
        },
        handleAdd() {
            // 只能获取到子 - 无法获取到父
            let selectedAllAuths = this.$refs.auths.getCheckedNodes()
            // 将所有选中权限的id存储到数组中
            let authArr = selectedAllAuths.map(item => item._id)
            // 从选中的所有当中将所有的父id获取到
            let selectedAllParentAuths = selectedAllAuths.map(item => item.parentId)
            // 遍历所有父id
            selectedAllParentAuths.forEach(item => {
                // 如果父id不是0 - 排除掉一级权限
                if(item != '0') {
                    // 在所有id中找是否有父id
                    let index = authArr.indexOf(item)
                    // 如果没有找到 - 说明选中的所有当中没有父id
                    if(index < 0) {
                        // 将父权限id添加到数组中
                        authArr.push(item)
                    }
                }
            })
            // console.log(22, authArr);
            // 发请求将form中的name和authArr添加到数据库中
            roleAdd({name: this.form.name, auths: authArr}).then(data => {
                console.log(data);
            })
        }
    },
    created() {
        this.getAuthList()
    }
}
</script>

<style>
    
</style>
